import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';

import * as AccordionStories from './Accordion.stories';

<Meta of={AccordionStories} />

# Accordion

The Accordion component is a vertically stacked set of interactive headings that each reveal an associated section of content. It allows users to show and hide sections of related content on a page, helping to reduce page length and organize complex content.

## Usage

<Canvas of={AccordionStories.Documentation} source={ { code: `
import React from "react";
import { Accordion } from "@webiny/admin-ui";
import { ReactComponent as WarningIcon } from "@webiny/icons/insert_chart.svg";
import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
import { ReactComponent as TrashIcon } from "@webiny/icons/delete.svg";

const AccordionExample = () => {
    return (
        <Accordion variant="underline" background="base">
            <Accordion.Item
                title="Accordion Item 1"
                description="This is a description for the first item"
                icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
                actions={
                    <>
                        <Accordion.Item.Action icon={<EditIcon />} />
                        <Accordion.Item.Action icon={<TrashIcon />} />
                    </>
                }
            >
                This is the content for the first accordion item. It can contain any React elements.
            </Accordion.Item>

            <Accordion.Item
                title="Accordion Item 2"
                description="This is a description for the second item"
                defaultOpen={true}
            >
                This is the content for the second accordion item. It&apos;s open by default.
            </Accordion.Item>

            <Accordion.Item
                title="Disabled Item"
                description="This item cannot be interacted with"
                disabled={true}
            >
                This content won&apos;t be visible because the item is disabled.
            </Accordion.Item>
        </Accordion>
    );
};

export default AccordionExample;

` } }
        additionalActions={[
            {
                title: 'Open in GitHub',
                onClick: () => {
                    window.open(
                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Accordion/Accordion.tsx',
                        '_blank'
                    );
                },
            }
        ]}
/>

<Controls of={AccordionStories.Documentation} />

```tsx
import React from "react";
import { Accordion } from "@webiny/admin-ui";
import { ReactComponent as WarningIcon } from "@webiny/icons/insert_chart.svg";
import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
import { ReactComponent as TrashIcon } from "@webiny/icons/delete.svg";

const AccordionExample = () => {
    return (
        <Accordion variant="underline" background="base">
            <Accordion.Item
                title="Accordion Item 1"
                description="This is a description for the first item"
                icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
                actions={
                    <>
                        <Accordion.Item.Action icon={<EditIcon />} />
                        <Accordion.Item.Action icon={<TrashIcon />} />
                    </>
                }
            >
                This is the content for the first accordion item. It can contain any React elements.
            </Accordion.Item>

            <Accordion.Item
                title="Accordion Item 2"
                description="This is a description for the second item"
                defaultOpen={true}
            >
                This is the content for the second accordion item. It&apos;s open by default.
            </Accordion.Item>

            <Accordion.Item
                title="Disabled Item"
                description="This item cannot be interacted with"
                disabled={true}
            >
                This content won&apos;t be visible because the item is disabled.
            </Accordion.Item>
        </Accordion>
    );
};

export default AccordionExample;
```

## Examples

### Default

<Canvas of={AccordionStories.Default} source={ { code: `
import React from "react";
import { Accordion } from "@webiny/admin-ui";

const DefaultAccordionExample = () => {
    return (
        <Accordion>
            <Accordion.Item title="Accordion item 1">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. Etiam venenatis, odio
                sed consectetur consectetur, quam quam blandit ante, semper maximus lorem est vel dolor.
            </Accordion.Item>
            <Accordion.Item title="Accordion item 2">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. Etiam venenatis, odio
                sed consectetur consectetur, quam quam blandit ante, semper maximus lorem est vel dolor.
            </Accordion.Item>
            <Accordion.Item title="Accordion item 3">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. Etiam venenatis, odio
                sed consectetur consectetur, quam quam blandit ante, semper maximus lorem est vel dolor.
            </Accordion.Item>
        </Accordion>
    );
};

export default DefaultAccordionExample;
` } } />

### With Descriptions

<Canvas of={AccordionStories.WithDescriptions} source={ { code: `
import React from "react";
import { Accordion } from "@webiny/admin-ui";

const WithDescriptionsExample = () => {
    return (
        <Accordion>
            <Accordion.Item
                title="Accordion item 1"
                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
            >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
            </Accordion.Item>
            <Accordion.Item
                title="Accordion item 2"
                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
            >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
            </Accordion.Item>
            <Accordion.Item
                title="Accordion item 3"
                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
            >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
            </Accordion.Item>
        </Accordion>
    );
};

export default WithDescriptionsExample;
` } } />

### With Icon

<Canvas of={AccordionStories.WithIcon} source={ { code: `
import React from "react";
import { Accordion } from "@webiny/admin-ui";
import { ReactComponent as WarningIcon } from "@webiny/icons/insert_chart.svg";

const WithIconExample = () => {
    return (
        <Accordion>
            <Accordion.Item
                title="Accordion item 1"
                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
            >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
            </Accordion.Item>
            <Accordion.Item
                title="Accordion item 2"
                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
            >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
            </Accordion.Item>
        </Accordion>
    );
};

export default WithIconExample;
` } } />

### With Actions

<Canvas of={AccordionStories.WithActionsIcon} source={ { code: `
import React from "react";
import { Accordion } from "@webiny/admin-ui";
import { ReactComponent as WarningIcon } from "@webiny/icons/insert_chart.svg";
import { ReactComponent as ArrowUp } from "@webiny/icons/arrow_upward.svg";
import { ReactComponent as ArrowDown } from "@webiny/icons/arrow_downward.svg";
import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
import { ReactComponent as TrashIcon } from "@webiny/icons/delete.svg";

const WithActionsExample = () => {
    return (
        <Accordion>
            <Accordion.Item
                title="Accordion item 1"
                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
                actions={
                    <>
                        <Accordion.Item.Action icon={<ArrowUp />} />
                        <Accordion.Item.Action icon={<ArrowDown />} />
                        <Accordion.Item.Action.Separator />
                        <Accordion.Item.Action icon={<EditIcon />} />
                        <Accordion.Item.Action icon={<TrashIcon />} />
                    </>
                }
            >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
            </Accordion.Item>
            <Accordion.Item
                title="Accordion item 2"
                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
                actions={
                    <>
                        <Accordion.Item.Action icon={<ArrowUp />} />
                        <Accordion.Item.Action icon={<ArrowDown />} />
                        <Accordion.Item.Action.Separator />
                        <Accordion.Item.Action icon={<EditIcon />} />
                        <Accordion.Item.Action icon={<TrashIcon />} />
                    </>
                }
            >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
            </Accordion.Item>
        </Accordion>
    );
};

export default WithActionsExample;
` } } />

### With Draggable Item

<Canvas of={AccordionStories.WithDraggableItem} source={ { code: `
import React from "react";
import { Accordion } from "@webiny/admin-ui";
import { ReactComponent as WarningIcon } from "@webiny/icons/insert_chart.svg";

const WithHandleExample = () => {
    return (
        <Accordion>
            <Accordion.Item
                title="Accordion item 1"
                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
                 draggable={true}
            >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
            </Accordion.Item>
            <Accordion.Item
                title="Accordion item 2"
                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                 draggable={true}
            >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
            </Accordion.Item>
             <Accordion.Item
                title="Accordion item 3"
                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
            >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
            </Accordion.Item>
        </Accordion>
    );
};

export default WithHandleExample;
` } } />

### Non-Interactive Item

<Canvas of={AccordionStories.WithNotInteractiveItem} source={ { code: `
import React from "react";
import { Accordion } from "@webiny/admin-ui";

const NonInteractiveExample = () => {
    return (
        <Accordion>
            <Accordion.Item
                title="Non-interactive item"
                description="This item cannot be expanded or collapsed."
                interactive={false}
            >
                This content won&apos;t be accessible because the item is not interactive.
            </Accordion.Item>
            <Accordion.Item title="Regular item">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
            </Accordion.Item>
            <Accordion.Item title="Another regular item">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
            </Accordion.Item>
        </Accordion>
    );
};

export default NonInteractiveExample;
` } } />

### Default Open Item

<Canvas of={AccordionStories.WithDefaultOpenedItem} source={ { code: `
import React from "react";
import { Accordion } from "@webiny/admin-ui";

const DefaultOpenExample = () => {
    return (
        <Accordion>
            <Accordion.Item
                title="Regular item"
                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
            >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
            </Accordion.Item>
            <Accordion.Item
                title="Default open item"
                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                defaultOpen={true}
            >
                This item is open by default. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Sed elit sem, pretium sit amet convallis nec, consequat non nulla.
            </Accordion.Item>
        </Accordion>
    );
};

export default DefaultOpenExample;
` } } />

### Disabled Item

<Canvas of={AccordionStories.WithDisabledItem} source={ { code: `
import React from "react";
import { Accordion } from "@webiny/admin-ui";

const DisabledItemExample = () => {
    return (
        <Accordion>
            <Accordion.Item
                title="Regular item"
                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
            >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
            </Accordion.Item>
            <Accordion.Item
                title="Disabled item"
                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                disabled={true}
            >
                This content won&apos;t be accessible because the item is disabled.
            </Accordion.Item>
            <Accordion.Item
                title="Disabled but open item"
                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                defaultOpen={true}
                disabled={true}
            >
                This item is disabled but open by default. Users cannot toggle it.
            </Accordion.Item>
        </Accordion>
    );
};

export default DisabledItemExample;
` } } />

### Container Variant

<Canvas of={AccordionStories.ContainerVariant} source={ { code: `
import React from "react";
import { Accordion } from "@webiny/admin-ui";
import { ReactComponent as WarningIcon } from "@webiny/icons/insert_chart.svg";

const ContainerVariantExample = () => {
    return (
        <Accordion variant="container">
            <Accordion.Item
                title="Accordion item 1"
                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
            >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
            </Accordion.Item>
            <Accordion.Item
                title="Accordion item 2"
                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
            >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
            </Accordion.Item>
        </Accordion>
    );
};

export default ContainerVariantExample;
` } } />

### Light Background

<Canvas of={AccordionStories.LightBackground} source={ { code: `
import React from "react";
import { Accordion } from "@webiny/admin-ui";
import { ReactComponent as WarningIcon } from "@webiny/icons/insert_chart.svg";

const LightBackgroundExample = () => {
    return (
        <Accordion background="base">
            <Accordion.Item
                title="Accordion item 1"
                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
            >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
            </Accordion.Item>
            <Accordion.Item
                title="Accordion item 2"
                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
            >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
            </Accordion.Item>
        </Accordion>
    );
};

export default LightBackgroundExample;
` } } />

### Container Variant with Light Background

<Canvas of={AccordionStories.ContainerVariantWithLightBackground} source={ { code: `
import React from "react";
import { Accordion } from "@webiny/admin-ui";
import { ReactComponent as WarningIcon } from "@webiny/icons/insert_chart.svg";

const ContainerLightExample = () => {
    return (
        <Accordion variant="container" background="base">
            <Accordion.Item
                title="Accordion item 1"
                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
            >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
            </Accordion.Item>
            <Accordion.Item
                title="Accordion item 2"
                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
            >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
                convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
            </Accordion.Item>
        </Accordion>
    );
};

export default ContainerLightExample;
` } } />

### Nested Accordions

<Canvas of={AccordionStories.NestedAccordions} source={ { code: `
import React from "react";
import { Accordion } from "@webiny/admin-ui";
import { ReactComponent as WarningIcon } from "@webiny/icons/insert_chart.svg";

const NestedExample = () => {
    return (
        <Accordion>
            <Accordion.Item
                title="Level 1"
                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
                actions={
                    <>
                        <Accordion.Item.Action icon={<ArrowUp />} />
                        <Accordion.Item.Action icon={<ArrowDown />} />
                        <Accordion.Item.Action.Separator />
                        <Accordion.Item.Action icon={<EditIcon />} />
                        <Accordion.Item.Action icon={<TrashIcon />} />
                    </>
                }
            >
                <Accordion>
                    <Accordion.Item
                        title="Level 2"
                        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                        icon={
                            <Accordion.Item.Icon
                                icon={<WarningIcon />}
                                label={"Warning icon"}
                            />
                        }
                        actions={
                            <>
                                <Accordion.Item.Action icon={<ArrowUp />} />
                                <Accordion.Item.Action icon={<ArrowDown />} />
                                <Accordion.Item.Action.Separator />
                                <Accordion.Item.Action icon={<EditIcon />} />
                                <Accordion.Item.Action icon={<TrashIcon />} />
                            </>
                        }
                    >
                        <Accordion>
                            <Accordion.Item
                                title="Level 3"
                                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                                icon={
                                    <Accordion.Item.Icon
                                        icon={<WarningIcon />}
                                        label={"Warning icon"}
                                    />
                                }
                                actions={
                                    <>
                                        <Accordion.Item.Action icon={<ArrowUp />} />
                                        <Accordion.Item.Action icon={<ArrowDown />} />
                                        <Accordion.Item.Action.Separator />
                                        <Accordion.Item.Action icon={<EditIcon />} />
                                        <Accordion.Item.Action icon={<TrashIcon />} />
                                    </>
                                }
                            >
                                <Accordion>
                                    <Accordion.Item title="Level 4">
                                        <Accordion>
                                            <Accordion.Item title="Level 5">
                                                Content
                                            </Accordion.Item>
                                        </Accordion>
                                        <Accordion>
                                            <Accordion.Item title="Level 5">
                                                Content
                                            </Accordion.Item>
                                        </Accordion>
                                        <Accordion>
                                            <Accordion.Item title="Level 5">
                                                Content
                                            </Accordion.Item>
                                        </Accordion>
                                    </Accordion.Item>
                                </Accordion>
                            </Accordion.Item>
                        </Accordion>
                        <Accordion>
                            <Accordion.Item title="Level 3">Content</Accordion.Item>
                        </Accordion>
                        <Accordion>
                            <Accordion.Item title="Level 3">Content</Accordion.Item>
                        </Accordion>
                    </Accordion.Item>
                </Accordion>
            </Accordion.Item>
            <Accordion.Item title="Level 1">
                <Accordion>
                    <Accordion.Item
                        title="Level 2"
                        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                        icon={
                            <Accordion.Item.Icon
                                icon={<WarningIcon />}
                                label={"Warning icon"}
                            />
                        }
                        actions={
                            <>
                                <Accordion.Item.Action icon={<ArrowUp />} />
                                <Accordion.Item.Action icon={<ArrowDown />} />
                                <Accordion.Item.Action.Separator />
                                <Accordion.Item.Action icon={<EditIcon />} />
                                <Accordion.Item.Action icon={<TrashIcon />} />
                            </>
                        }
                    >
                        <Accordion>
                            <Accordion.Item title="Level 3">
                                <Accordion>
                                    <Accordion.Item title="Level 4">
                                        <Accordion>
                                            <Accordion.Item title="Level 5">
                                                Test
                                            </Accordion.Item>
                                        </Accordion>
                                        <Accordion>
                                            <Accordion.Item title="Level 5">
                                                Test
                                            </Accordion.Item>
                                        </Accordion>
                                        <Accordion>
                                            <Accordion.Item title="Level 5">
                                                Test
                                            </Accordion.Item>
                                        </Accordion>
                                    </Accordion.Item>
                                </Accordion>
                            </Accordion.Item>
                        </Accordion>
                        <Accordion>
                            <Accordion.Item title="Level 3">Content</Accordion.Item>
                        </Accordion>
                        <Accordion>
                            <Accordion.Item title="Level 3">Content</Accordion.Item>
                        </Accordion>
                    </Accordion.Item>
                </Accordion>
            </Accordion.Item>
        </Accordion>
    );
};

export default NestedExample;
` } } />
